<template>
	<view>
		<view class="user-top">
			<image class="set" src="../../../static/user/set.png" mode=""></image>
			<view class="usermsg">
				<image class="head" src="../../../static/user/head.png" mode=""></image>
				<text class="name">ZENO</text>
				<image class="edit" src="../../../static/user/edit.png" mode=""></image>
			</view>
			<view class="details">
				<view class="">
					<text>850</text>
					<text>积分</text>
				</view>
				<view class="">
					<text>23</text>
					<text>年龄(月)</text>
				</view>
				<view class="">
					<text>15</text>
					<text>体重(kg)</text>
				</view>
			</view>
			<view class="vip-level">
				<image src="../../../static/user/vip.png" mode=""></image>
			</view>
		</view>
		<view class="">
			<uni-grid :column="4" :show-border="false"  :square="false">
			    <uni-grid-item v-for="item in ugd" :key='item.name'>
					<image class="ugd-img" :src="item.src" mode=""></image>
			        <text class="ugd-text">{{item.name}}</text>
			    </uni-grid-item>
			</uni-grid>
		</view>
		<view class="">
			<image class="ad" src="../../../static/user/ad.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	import UniGrid from '@/components/uni-grid/uni-grid.vue'
	import UniGridItem from '@/components/uni-grid-item/uni-grid-item.vue'
	export default {
		components:{
			UniGridItem,
			UniGrid
		},
		data() {
			return {
				ugd:[{
					'src':require('../../../static/user/1.png'),
					'url':'',
					'name':'宝宝考勤'
				},{
					'src':require('../../../static/user/2.png'),
					'url':'',
					'name':'宝宝资料'
				},{
					'src':require('../../../static/user/5.png'),
					'url':'',
					'name':'我的课程'
				},{
					'src':require('../../../static/user/4.png'),
					'url':'',
					'name':'购物车'
				},{
					'src':require('../../../static/user/3.png'),
					'url':'',
					'name':'订单管理'
				},{
					'src':require('../../../static/user/6.png'),
					'url':'',
					'name':'院长信箱'
				},]
			};
		}
	}
</script>

<style lang="less">
.user-top{
	background-color: #00ABC1;
	background-image: url('../../../static/user/bg.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	height: 324rpx;
	position: relative;
	padding: 10rpx 30rpx;
}

.usermsg{
	display: flex;
	align-items: center;
}

.head{
	width: 122rpx;
	height: 122rpx;
}

.edit{
	width: 19rpx;
	height: 25rpx;
}

.set{
	position: absolute;
	right: 20rpx;
	top: 10rpx;
	width: 40rpx;
	height: 42rpx;
}

.name{
	font-size: 28rpx;
	color: #fff;
	font-weight: 600;
	margin: 0 20rpx;
}

.ad{
	display: block;
	margin: 10rpx auto;
	width: 720rpx;
	height: 181rpx;
}

.vip-level{
	image{
		width: 672rpx;
		height: 143rpx;
	}
}

.ugd-img{
	margin: 10rpx auto;
	width: 90rpx;
	height: 89rpx;
}

.uni-grid-item{
	margin: 20rpx 0;
}

.ugd-text{
	font-size: 24rpx;
	text-align: center;
}

.details{
	display: flex;
	justify-content: space-around;
	view{
		text{
			display: block;
			color: #fff;
			text-align: center;
		}
		text:nth-child(1){
			font-size: 32rpx;
			line-height: 70rpx;
			font-weight: 600;
		}
		text:nth-child(2){
			font-size: 24rpx;
		}
	}
}
</style>
